{% extends 'common/goodspublic.html' %}
{% load static %}

{% block title %}
    确认订单
{% endblock %}

{% block header %}
    <header data-am-widget="header" class="am-header am-header-default sq-head ">
        <div class="am-header-left am-header-nav">
            <a href="javascript:history.back()" class="">
                <i class="am-icon-chevron-left"></i>
            </a>
        </div>
        <h1 class="am-header-title">
            <a href="" class="">确认订单</a>
        </h1>
    </header>
{% endblock %}

{% block content %}
    <div style="height: 49px;"></div>
    <form method="post" action="">
        {% csrf_token %}
        {% if address %}
            <h5 class="order-tit">收货人信息</h5>
            <div class="order-name">
                <a href="{% url 'user:收货地址' %}">
                    <p class="order-tele">{{ address.name }}&nbsp;&nbsp;&nbsp;{{ address.phone_num }}</p>
                    <p class="order-add">
                        {{ address.hcity }}{{ address.hproper }}{{ address.harea }} {{ address.brief }}
                    </p>
                </a>
                <i class="am-icon-angle-right"></i>
                <input type="hidden" name="address_id" value="{{ address.pk }}">
            </div>
        {% else %}
            <div class="add-address">
                <a href="{% url 'user:添加地址' %}">+新建收货地址</a>
                <i class="am-icon-angle-right"></i>
            </div>
        {% endif %}
        <div style="background: #eee; height: 10px;"></div>
        {% for goods_sku in goods_skus %}
            <ul class="shopcart-list" style="padding-bottom: 0;">
                <li>
                    <img src="{{ MEDIA_URL }}{{ goods_sku.LOGO }}" class="shop-pic"/>
                    <div class="order-mid">
                        <div class="tit">{{ goods_sku.spu.spu_name }}{{ goods_sku.sku_name }}</div>
                        <div class="order-price">￥{{ goods_sku.price }} <i>X{{ goods_sku.count }}</i></div>
                    </div>
                    <input type="hidden" name="sku_ids" value="{{ goods_sku.pk }}">
                </li>
            </ul>
        {% endfor %}

        <ul class="order-infor">
            <li class="order-infor-first">
                <span>商品总计：</span>
                <i>￥<span id="goods_price">{{ total_price }}</span></i>
            </li>
            <li class="order-infor-first">
                <span>运费：</span>
                <i>
                    <select name="transport" id="transport">
                        {% for transport in transports %}
                            <option value="{{ transport.pk }}"
                                    price="{{ transport.price }}">{{ transport.name }}--￥{{ transport.price }}</option>
                        {% endfor %}
                    </select>
                </i>
            </li>
            <li class="order-infor-first">
                <a href="">积分抵费></a>
            </li>
            <li class="order-infor-first">
                <a href="">选择优惠券></a>
            </li>
        </ul>
        <div style="background: #eee; height: 10px;"></div>
        <textarea placeholder="备注说明" class="bz-infor" name="comment"></textarea>
        <div style="background: #eee; height: 10px;"></div>
        <div style="height: 55px;"></div>
        <div class="shop-fix">
            <div class="order-text">
                应付总额：<span id="paymoney">￥0.00</span>
            </div>
            <a href="javascript:;" class="js-btn">提交订单</a>
        </div>
    </form>
{% endblock %}

{% block foot %}
    <!--底部-->
    <div style="height: 55px;"></div>
    <div data-am-widget="navbar" class="am-navbar am-cf am-navbar-default sq-foot am-no-layout" id="">
        <ul class="am-navbar-nav am-cf am-avg-sm-5">
            <li>
                <a href="{% url 'goods:超市主页' %}" class="">
                    <span class="am-icon-home"></span>
                    <span class="am-navbar-label">首页</span>
                </a>
            </li>
            <li>
                <a href="message.html" class="">
                    <span class="am-icon-comments"></span>
                    <span class="am-navbar-label">动态</span>
                </a>
            </li>
            <li>
                <a href="{% url 'shopcart:购物车' %}" class="">
                    <span class="am-icon-shopping-cart"></span>
                    <span class="am-navbar-label">购物车</span>
                </a>
            </li>
            <li>
                <a href="allorder.html" class="">
                    <span class="am-icon-file-text"></span>
                    <span class="am-navbar-label">订单</span>
                </a>
            </li>

            <li>
                <a href="{% url 'user:个人中心' %}" class="curr">
                    <span class="am-icon-user"></span>
                    <span class="am-navbar-label">我的</span>
                </a>
            </li>
        </ul>
    </div>
{% endblock %}



{% block foot_js %}
    <script type="application/javascript">
        //计算总金额
        $(function () {
            function paymoney() {
                var goods_price = $('#goods_price').text();
                var transport_price = $('#transport').find(':selected').attr('price');
                var paymoney = Number(goods_price) + Number(transport_price);
                $('#paymoney').text('￥' + paymoney.toFixed(2))
            }

            paymoney();
            //绑定修改事件
            $('#transport').on('change', function () {
                paymoney()
            });
            //点击提交表单时间
            $('.js-btn').on('click', function () {
                //获取数据
                var data = $('form').serialize();
                //console.debug(data)
                //提交数据
                $.ajax({
                    type: 'post',
                    url: '{% url "orders:保存订单" %}',
                    data: data,
                    dataType: 'json',
                    success: function (data) {
                        if (data.code == 0) {
                            location.href = "{% url 'orders:确认支付' %}?number="+data.data;
                        } else {
                            alert(data.errmsg)
                        }
                    }
                })
            })
        })
    </script>

    <script src="{% static 'js/jquery.min.js' %}"></script>
    <script src="{% static 'js/amazeui.min.js' %}"></script>
{% endblock %}

